<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>备件管理系统 - 库存预警</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
</head>
<body>
<div id="app">
  <!-- 页面标题插槽 -->
  <h2 style="display: none;"><slot name="pageTitle">库存预警</slot></h2>

  <!-- 页面头部插槽 -->
  <header class="header">
    <h2 style="margin: 0;">库存预警</h2>
  </header>

  <!-- 主体内容插槽 -->
  <main>
    <div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px;">
      <!-- 搜索框与退出按钮容器 -->
      <div style="display: flex; justify-content: flex-end; flex-direction: column; align-items: flex-end; gap: 10px;">
        <el-input v-model="searchQuery" placeholder="请输入搜索内容" style="width: 300px;"></el-input>
        <el-button type="info" size="small" @click="logout">退出</el-button>
      </div>
    </div>
    <el-table :data="filteredInventoryAlerts" border style="width: 100%">
      <el-table-column prop="alertid" label="ID"></el-table-column>
      <el-table-column prop="sparepartid" label="备件ID"></el-table-column>
      <el-table-column prop="totalQuantity" label="总库存量"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
    </el-table>
  </main>

  <!-- 引入 Vue + Axios + Element Plus -->
  <script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/element-plus"></script>

  <script>
    const { createApp } = Vue;
    const apiClient = axios.create({
      //本机地址
      //baseURL: 'http://localhost:8086',
      //服务器 地址
      baseURL: 'http://8.137.85.243:8086',
      timeout: 5000
    });

    const app = createApp({
      data() {
        return {
          inventoryAlertsList: [],
          searchQuery: ''
        };
      },
      computed: {
        filteredInventoryAlerts() {
          if (!this.searchQuery) {
            return this.inventoryAlertsList;
          }
          return this.inventoryAlertsList.filter(item => 
            item.sparepartid.toString().includes(this.searchQuery)
          );
        }
      },
      mounted() {
        this.loadInventoryAlerts();
      },
      methods: {
        async loadInventoryAlerts() {
          const res = await apiClient.get('/api/inventoryalerts/listall');
          this.inventoryAlertsList = res.data;
        },
        logout() {
          window.location.href = '/operator.html';
        }
      }
    });

    app.use(ElementPlus);
    app.mount('#app');
  </script>
</div>
</body>
</html>